<template>
    <div class="fill-form-table-item">
        <slot name="titleName"></slot>
        <template v-if="itemData.valueKindId === '1'">
            <el-input v-model="model.itemValue" :placeholder="model.placeholder || ''"></el-input>
        </template>
        <template v-else-if="itemData.valueKindId === '2'">
            <el-input type="textarea" v-model="model.itemValue" :row="1" :placeholder="model.placeholder || ''"></el-input>
        </template>
        <template v-else-if="itemData.valueKindId === '12'">
            <el-input v-model="model.itemValue" @input="checkNumber" :maxlength="itemData.valueLength || 30" :placeholder="model.placeholder || ''"></el-input>
        </template>
        <template v-else-if="itemData.valueKindId === '13'">
            <el-input v-model="model.itemValue" @input="checkNumberDecimal" :maxlength="itemData.valueLength || 30" :placeholder="model.placeholder || ''"></el-input>
        </template>
        <template v-else-if="itemData.valueKindId === '11'">
            <el-date-picker
                class="date-picker"
                v-model="model.itemValue"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </template>
        <template v-else-if="itemData.valueKindId === '3'">
            <el-date-picker
                class="date-picker"
                v-model="model.itemValue"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="yyyy-MM-dd">
            </el-date-picker>
        </template>
        <template v-else-if="itemData.valueKindId === '4'">
            <el-button @click="selectAddress(model.extData)" type="primary">选择地址</el-button>
        </template>
        <template v-else-if="itemData.valueKindId === '5'">
            <upLoad-cos
                :list="model.extData"
                @onUpdate="onUpdate"
                :limit="10"
                :customList="true"
                :accept="`.bmp,.jpg,.jpeg,.png,.gif`"
                type="form-data"
                fileType="img">
            </upLoad-cos>
        </template>
        <template v-else-if="itemData.valueKindId === '6'">
            <el-select v-model="model.itemValue" placeholder="请选择" @change="changeSelectToSow(model)">
                <el-option
                    v-for="item in itemData.options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
        </template>
        <template v-else-if="itemData.valueKindId === '7'">
            <el-select class="singe-line-select" v-model="selectValue" multiple placeholder="请选择" @change="changeSelect">
                <el-option
                    v-for="item in itemData.options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
        </template>
        <template v-else-if="itemData.valueKindId === '8'">
            <upLoad-cos
                :list="model.extData"
                @onUpdate="onUpdate"
                :limit="1"
                :customList="true"
                :accept="`.mp4,.m2v,.mkv,.rmvb,.wmv,.avi,.flv,.mov,.m4v`"
                type="form-data"
                fileType="video">
            </upLoad-cos>
        </template>
        <template v-else-if="itemData.valueKindId === '9'">
            <upLoad-cos
                :list="model.extData"
                @onUpdate="onUpdate"
                :limit="1"
                :customList="true"
                :accept="'.wmv,.act,.rec,.vy1,.vy2,.vy3,.vy4,.sc4,.dvf,.msc,.wma,.mp3,.wav,.aiff,.ava'"
                type="form-data"
                fileType="audio">
            </upLoad-cos>
        </template>
        <template v-else-if="itemData.valueKindId === '10'">
            <upLoad-cos
                :list="model.extData"
                @onUpdate="onUpdate"
                :limit="5"
                :customList="true"
                :accept="'*'"
                type="form-data"
                fileType="doc">
            </upLoad-cos>
        </template>
        <map-location ref="MapLocation" @updateAddress="updateAddress"></map-location>
    </div>
</template>

<script lang="ts">
import { Component, PropSync } from "vue-property-decorator";
import UpLoadCos from "@/components/upload-cos/index.vue";
import DetailMixin from "./detail.mixin";
import MapLocation from "@/components/map-location/index.vue";

@Component({
    components: {
        UpLoadCos,
        MapLocation
    }
})
export default class FillInTableItem extends DetailMixin {
    @PropSync(
        "item",
        {
            type: Object,
            default: () => {
                return {};
            }
        })
    private itemData!: any;

    @PropSync(
        "modelData",
        {
            type: Object,
            default: () => {
                return {};
            }
        })
    private model!: any;

    selectValue: any[] = []
    oldNumber = ""

    created() {
        if (this.itemData.valueKindId === "7") {
            this.selectValue = this.model.itemValue ? this.model.itemValue.split(",") : [];
        }
        this.$set(this.itemData, "dataItemId", this.model.dataItemId);
    }

    // 校验数字
    checkNumber(val: any) {
        if (isNaN(Number(val)) && val !== "-") {
            this.model.itemValue = this.oldNumber;
        } else {
            if (val.includes('.')) {
                this.model.itemValue = this.oldNumber;
            } else {
                this.oldNumber = this.model.itemValue;
            }
        }
    }

    // 校验小数
    checkNumberDecimal(val: any) {
        if (isNaN(Number(val)) && val !== "-" && val.split('.').length > 1) {
            this.model.itemValue = this.oldNumber;
        } else {
            if (val.split('.')[1]) {
                if (val.split('.')[1].length > 2) {
                    this.model.itemValue = this.oldNumber;
                } else {
                    this.oldNumber = this.model.itemValue;
                }
            } else {
                this.oldNumber = this.model.itemValue;
            }
        }
    }

    changeSelect(val: any) {
        if (this.itemData.valueKindId === "7") this.model.itemValue = val.join(",");
    }

    onUpdate(list: any) {
        this.model.extData = list.map((item: any) => item.url);
    }

    // 选择地址
    selectAddress(data: any) {
        (this.$refs.MapLocation as any).show(data);
    }

    // 选址后回调
    updateAddress(data: any) {
        this.model.extData = {
            cityName: data.address,
            cityAddress: data.infoAddress,
            longitude: data.lng,
            latitude: data.lat
        };
    }
}
</script>

<style lang="scss" scoped>

</style>
